<template>
	<view class="page">
		<view class="advertisement">
			<u-row gutter="16">
				<u-col span="4">
					<view class="little-box">

						<p><svg t="1711527400412" class="icon" viewBox="0 0 1024 1024" version="1.1"
								xmlns="http://www.w3.org/2000/svg" p-id="5601" width="16" height="16">
								<path
									d="M514.56 921.6C381.44 921.6 153.6 724.48 151.04 524.8v-209.92C153.6 268.8 186.88 230.4 232.96 225.28c40.96-2.56 76.8-12.8 112.64-28.16h2.56c35.84-10.24 71.68-30.72 99.84-53.76 35.84-28.16 81.92-30.72 120.32-5.12 33.28 25.6 69.12 46.08 104.96 61.44 38.4 10.24 79.36 20.48 120.32 25.6 46.08 7.68 76.8 46.08 79.36 89.6 2.56 71.68 2.56 145.92-2.56 217.6C839.68 780.8 640 921.6 514.56 921.6zM363.52 243.2c-40.96 15.36-81.92 28.16-125.44 30.72-20.48 2.56-35.84 20.48-35.84 40.96v209.92C204.8 691.2 407.04 870.4 514.56 870.4 622.08 870.4 793.6 747.52 819.2 524.8c5.12-69.12 5.12-140.8 2.56-209.92 0-20.48-17.92-38.4-38.4-43.52-43.52-7.68-84.48-15.36-128-28.16-43.52-17.92-81.92-40.96-117.76-66.56-15.36-10.24-40.96-10.24-56.32 2.56-33.28 28.16-74.24 51.2-117.76 64z"
									fill="#d81e06" p-id="5602"></path>
								<path
									d="M714.24 448l-217.6 207.36c-10.24 10.24-25.6 10.24-35.84 2.56l-5.12-5.12-122.88-125.44c-10.24-12.8-10.24-30.72 2.56-43.52 12.8-10.24 30.72-10.24 43.52 2.56l97.28 104.96 197.12-186.88c12.8-10.24 30.72-10.24 43.52 2.56 10.24 10.24 10.24 30.72-2.56 40.96"
									fill="#d81e06" p-id="5603"></path>
							</svg>100%正品</p>
					</view>
				</u-col>
				<u-col span="4">
					<view class="little-box">
						<p><svg t="1711527496841" class="icon" viewBox="0 0 1024 1024" version="1.1"
								xmlns="http://www.w3.org/2000/svg" p-id="6762" width="16" height="16">
								<path
									d="M582.02996 986.738351c-13.697977 0-27.39493-5.212722-37.824467-15.639189L89.942475 516.831029c-4.267187-3.928472-21.856797-22.12081-21.596877-54.717206L50.167586 67.275219c-0.23843-5.173836 1.713015-10.209526 5.375427-13.871939l0.676405-0.676405c3.662413-3.662413 8.698103-5.610788 13.871939-5.375427l394.838603 18.178011c32.637328-0.270153 50.792826 17.33276 54.718229 21.597901l454.266088 454.260971c20.849864 20.857027 20.849864 54.78986 0.00307 75.644841l-32.743752 32.742728c-7.192819 7.192819-18.85544 7.192819-26.048259 0s-7.192819-18.85544 0-26.048259l32.740682-32.740682c6.488785-6.491855 6.488785-17.058514-0.00307-23.552415L493.26838 112.846114c-0.468674-0.468674-0.50756-0.469698-0.852414-0.900509-1.249457-1.261737-10.387581-9.828856-27.541263-9.574053-0.372483 0.007163-0.743944 0-1.115404-0.017396L87.86414 85.049025l17.305131 375.894136c0.017396 0.37146 0.022513 0.74292 0.017396 1.11438-0.249687 17.170055 8.31334 26.292829 9.574053 27.542286 0.429789 0.344854 0.430812 0.382717 0.900509 0.852414l454.592522 454.596615c6.491855 6.489808 17.056468 6.491855 23.548322 0l218.781842-218.779795c2.734274-2.735297 33.516348-32.255635 87.008656-32.255635 10.172687 0 18.419512 8.246825 18.419512 18.419512s-8.246825 18.419512-18.419512 18.419512c-38.918381 0-60.595077 21.093411-60.803831 21.306258-0.052189 0.054235-0.104377 0.106424-0.156566 0.158612L619.851357 971.097116C609.425913 981.523583 595.727936 986.737328 582.02996 986.738351z"
									fill="#d81e06" p-id="6763"></path>
								<path
									d="M225.154993 290.479791c-38.251186 0-69.37095-31.119765-69.37095-69.37095s31.119765-69.37095 69.37095-69.37095 69.37095 31.119765 69.37095 69.37095S263.406179 290.479791 225.154993 290.479791zM225.154993 188.576913c-17.938558 0-32.531927 14.59337-32.531927 32.531927 0 17.938558 14.59337 32.531927 32.531927 32.531927 17.937534 0 32.531927-14.59337 32.531927-32.531927C257.685897 203.170283 243.092527 188.576913 225.154993 188.576913z"
									fill="#d81e06" p-id="6764"></path>
							</svg>品牌保障</p>
					</view>
				</u-col>
				<u-col span="4">
					<view class="little-box">
						<p><svg t="1711527677892" class="icon" viewBox="0 0 1024 1024" version="1.1"
								xmlns="http://www.w3.org/2000/svg" p-id="9587" width="16" height="16">
								<path
									d="M512 0C355.427097 0 131.138065 83.736774 66.064516 83.736774v566.668387C73.992258 719.938065 130.477419 927.545806 512 1024c381.852903-96.454194 437.677419-304.061935 445.935484-373.594839V83.736774C893.687742 83.736774 669.39871 0 512 0z m379.870968 628.769032c-6.771613 58.632258-54.338065 233.703226-379.870968 314.962581C186.301935 862.472258 138.074839 687.40129 131.303226 628.769032V150.792258c55.659355 0 247.741935-70.523871 381.192258-70.523871s325.532903 70.523871 379.870968 70.523871v477.976774z"
									fill="#d81e06" p-id="9588"></path>
								<path
									d="M384 368.144516v-69.698064h257.486452v54.338064a403.654194 403.654194 0 0 0-64.908387 89.517419 521.249032 521.249032 0 0 0-49.548388 124.201291 457.661935 457.661935 0 0 0-16.516129 117.429677h-72.670967a500.43871 500.43871 0 0 1 33.032258-165.16129 550.152258 550.152258 0 0 1 84.892903-150.627097z"
									fill="#d81e06" p-id="9589"></path>
							</svg> 售后无忧</p>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="borders">

		</view>
		<view class="receiving_information">
			<p><svg t="1711525271070" class="icon" viewBox="0 0 1024 1024" version="1.1"
					xmlns="http://www.w3.org/2000/svg" p-id="4303" width="32" height="32">
					<path
						d="M647.786667 845.397333c-76.053333-24.234667-157.248-76.266667-240.917334-163.648-81.152-84.757333-131.626667-164.864-157.504-238.442666-16.832-47.829333-21.056-85.546667-18.581333-111.402667a50.986667 50.986667 0 0 1 0.384-3.221333l0.341333-3.349334c0.469333-18.112 10.922667-46.144 22.122667-59.264a414.677333 414.677333 0 0 1 34.56-39.466666c9.834667-9.877333 19.306667-18.133333 27.946667-24.192 12.885333-9.045333 21.162667-11.328 23.317333-10.069334-0.213333 0.021333 1.045333 1.322667 2.837333 3.776 3.157333 4.288 7.082667 10.517333 11.669334 18.410667a1030.4 1030.4 0 0 1 31.04 59.264 3473.109333 3473.109333 0 0 1 58.368 126.229333c1.706667 3.84 0.938667 12.309333-1.344 15.722667l-47.04 69.824a27.52 27.52 0 0 0-3.370667 7.424c-7.509333 25.92 12.309333 66.517333 73.834667 129.216 37.504 38.186667 70.293333 63.061333 98.496 77.077333 18.944 9.429333 33.28 12.8 42.730666 12.586667 4.48-0.192 8.256-1.450667 11.52-3.626667l69.546667-46.933333c3.584-2.410667 12.416-3.349333 16.533333-1.685333l8.704 3.477333a3178.794667 3178.794667 0 0 1 91.477334 38.464c7.04 3.114667 13.802667 6.144 20.266666 9.088 21.76 9.962667 39.637333 18.773333 52.629334 25.984 6.784 3.797333 12.074667 7.061333 15.573333 9.642667 1.429333 1.066667 2.432 1.877333 2.901333 2.346666a10.602667 10.602667 0 0 1-2.197333-3.968l1.472 3.2c4.522667 8.064-16.853333 38.122667-51.562667 68.714667a626.624 626.624 0 0 1-20.544 17.344 21.333333 21.333333 0 1 0 26.453334 33.450667 669.056 669.056 0 0 0 22.293333-18.794667c52.48-46.293333 80.661333-85.866667 60.544-121.642667l1.472 3.2c-6.037333-16.64-32.277333-31.274667-91.306667-58.261333-6.613333-3.050667-13.546667-6.144-20.736-9.322667a2876.629333 2876.629333 0 0 0-101.610666-42.538666c-17.109333-6.912-40.874667-4.416-56.234667 5.930666l-69.546667 46.933334 10.922667-3.626667c0.576-0.021333-0.554667-0.149333-2.986667-0.725333a92.693333 92.693333 0 0 1-19.306666-7.424c-23.68-11.776-52.693333-33.792-87.04-68.778667-51.797333-52.757333-65.322667-80.490667-63.317334-87.445333a16.021333 16.021333 0 0 1-1.92 4.074666l46.741334-69.376c10.474667-15.573333 12.586667-39.530667 5.013333-56.725333l-4.138667-9.365333a3937.258667 3937.258667 0 0 0-46.122666-100.202667c-3.029333-6.293333-5.973333-12.416-8.874667-18.304-30.997333-63.082667-48.512-93.290667-64.213333-100.48-18.922667-11.157333-42.261333-4.672-67.456 12.992-10.922667 7.658667-22.186667 17.472-33.642667 28.970667a456.597333 456.597333 0 0 0-37.610667 42.88c-16.853333 19.712-30.805333 57.173333-31.509333 84.906666l0.341333-3.349333c-0.277333 1.493333-0.597333 3.797333-0.896 6.954667-3.050667 31.893333 1.877333 75.818667 20.821334 129.621333 27.946667 79.466667 81.664 164.736 166.912 253.781333 88.490667 92.416 175.765333 148.330667 258.773333 174.805334 27.797333 8.853333 53.888 13.952 77.973333 15.957333a21.333333 21.333333 0 0 0 3.52-42.517333 310.570667 310.570667 0 0 1-68.522666-14.08z"
						fill="#1296db" p-id="4304"></path>
				</svg>
				{{ phone }}
			</p>
			<h2>
				{{ buyer.address }}
			</h2>
			<h4>{{ buyer.mpanyName }} | {{ buyer.unifiedCreditCode }}</h4>
			<h3 style="color: darkorange;">经机器学习预测，此批货物运费为:</h3>
			<h3 style="color: darkorange;">{{freight}} * {{number}} 元</h3>
		</view>
		<view class="commodity">
			<u-row gutter="16">
				<u-col span="5">
					<image :src="commodity.image1" alt="product image" mode="aspectFit"
						style="margin: 0 20rpx; width: 250rpx; height: 300rpx;" />
				</u-col>
				<u-col span="7">
					<div>
						<h3>{{ commodity.name }}</h3>
					</div>
					<div class="describe">{{ commodity.describe }}</div>
					<div class="parameter">{{ commodity.parameter }} </div>
				</u-col>
			</u-row>
			<view class="number"><u-number-box v-model="number" @change="valChange" :min="1" :max="100"></u-number-box>
			</view>
		</view>
		<u-button type="primary" class="buy" @click="addOrder()">结算</u-button>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				token: null,
				phone: null,
				commodityId: null,
				number: 1,
				//商品
				commodity: {
					id: null,
					name: null,
					describe: null,
					parameter: null,
					price: null,
					unitPrice: null,
					inventory: null,
					unitInventory: null,
					supplierAccount: null,
					image1: null,
					image2: null,
					image3: null,
					detailedImages: null,
					classification: null,
				},
				//购物商
				buyer: {
					tele: null,
					password: null,
					mpanyName: null,
					unifiedCreditCode: null,
					qualificationCertificateIma: null,
					avatarImage: null,
					buyerAccountrStatus: null,
					balance: null,
					address: null,
				},
				//运费
				freight: 0,
			}
		},
		created() {
			//获取商品id
			this.getcommodityId();

		},
		methods: {
			/**
			 * 计数器
			 */
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			/**
			 * 根据token返回采购商信息
			 */
			getBuyerByToken() {
				const url = "http://localhost:8088/buyer-order/buyer";
				uni.request({
					url: url,
					method: 'GET',
					header: {
						'content-type': 'application/json',
						'token': this.token
					},
					success: (res) => {
						this.buyer = res.data.data;
						console.log(this.buyer);
					},
					fail: (err) => {
						console.error('获取buyer数据失败：', err);
					}
				});
			},

			/**
			 * 根据id查找商品信息
			 */
			getCommodityById() {
				const url = "http://localhost:8088/commodity/findById/" + this.commodityId;
				uni.request({
					url: url,
					method: 'GET',
					header: {
						'content-type': 'application/json',
						'token': this.token
					},
					success: (res) => {
						this.commodity = res.data.data;
						console.log(this.commodity);

					},
					fail: (err) => {
						console.error('获取商品信息请求失败：', err);
					}
				});
				this.calculateShippingCosts();
			},
			
			/**
			 * 获取运费
			 */
			calculateShippingCosts() {
				const url = "http://localhost:8088/buyer-order/calculateShippingCosts?commodityId=" + this.commodityId;
				uni.request({
					url: url,
					method: 'POST',
					header: {
						'content-type': 'application/json',
						'token': this.token
					},
					success: (res) => {
						if(res.data.code == 1) {
							this.freight = res.data.data;
						} else {
							uni.showToast({
							  title: "对不起，您的地址暂时不支持配送",
							  icon: 'none',
							  duration: 1500
							});
						}
						
					},
					fail: (err) => {
						console.error('下单失败：', err);
					}
				});
			},

			/**
			 * 获取JWT
			 */
			recordToken() {
				this.token = localStorage.getItem('token');
				console.log(this.token);
				this.getBuyerByToken();
				this.getCommodityById();
			},

			/**
			 * 根据url获取tele和id
			 */
			getcommodityId() {
				this.phone = this.$route.query.tele;
				this.commodityId = this.$route.query.id;
				this.recordToken();
			},
			addOrder() {
				const url = "http://localhost:8088/buyer-order/addOrder";
				uni.request({
					url: url,
					method: 'POST',
					data: {
						buyerTele: this.phone,
						number: this.number,
						commodity: this.commodityId,
					},
					header: {
						'content-type': 'application/json',
						'token': this.token
					},
					success: (res) => {
						if(res.data.code == 1) {
							uni.showToast({
								title: '下单成功！',
								icon: 'success',
								duration: 2000
							});
							uni.switchTab({
								url: '/pages/index/index'
							});
						} else {
							uni.showToast({
							  title: res.data.msg,
							  icon: 'none',
							  duration: 1500
							});
						}
						
					},
					fail: (err) => {
						console.error('下单失败：', err);
					}
				});

			},

		}
	}
</script>


<style lang="scss">
	.u-row {
		margin: 1px 0 12px 0;
	}

	.page {
		height: 100vh;
		background-color: #EEEDEB;
		/* 设置页面背景颜色 */
		padding-top: 20rpx;
	}

	.wrap {
		padding: 24rpx;
	}

	.demo-layout {
		height: 80rpx;
		border-radius: 8rpx;
	}

	.receiving_information {
		margin: 0 10rpx 50rpx;
		height: 300rpx;
		padding: 20rpx;
		background-color: #fff;

		p {
			margin-bottom: 10rpx;
		}

		h4 {
			margin-top: 15rpx;
		}
	}

	.borders {
		background-color: palevioletred;
		height: 2rpx;
		margin: 0 10rpx;
	}

	.advertisement {
		position: relative;
		background-color: #fff;
		// height: 100rpx;
		margin: 10rpx;

		.little-box {

			// background: #99a9bf;
			p {
				text-align: center;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
			}

		}
	}

	.commodity {
		background-color: #fff;
		height: 400rpx;
		margin: 10rpx;

		.number {
			position: relative;
			left: 500rpx;
		}
	}

	.buy {
		position: fixed;
		bottom: 0px;
		left: 50%;
		transform: translateX(-50%);
		// position: absolute;
		// bottom: 0rpx;
		// margin-top: 200rpx;
	}

	.describe {
		margin: 10rpx;
		color: #636262;
		font-size: 26rpx;
	}

	.parameter {
		margin: 10rpx;
		// background-color: #cfe2ff;
		font-size: 26rpx;
		color: #01199c;
		font-weight: bold;
	}
</style>